<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">

    <title>Title</title>
    <script>
        function reloadImage() {
            document.getElementById("imgservlet").src = 'validation?time=' + new Date().getTime();
        }
    </script>
    <script>
        function searchUsername(obj) {
            var uname = obj.value;
            xmlHttpRequest = new XMLHttpRequest()
            xmlHttpRequest.open("GET", "searchusername?uname=" + uname, true);
            xmlHttpRequest.onreadystatechange = searchUsernameProcess;
            xmlHttpRequest.send(null);
        }

        function searchUsernameProcess() {
            if (xmlHttpRequest.readyState == 4) {
                if (xmlHttpRequest.status == 200) {
                    hintUsername();
                }
            }
        }

        function hintUsername() {
            document.getElementById("hint").innerHTML = xmlHttpRequest.responseText;
        }

    </script>
</head>
<header th:replace="common/IncludeTop"></header>
<body>

<div id="Content">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="../css/register.css" rel="stylesheet">
    <div class="container">
        <!-- 注册界面左栏 -->
        <div class="left">
        </div>
        <!-- 注册栏 -->
        <div class="right">
            <div class="reg-label">
                <label>用户注册</label>
                <br>
            </div>
            <div class="reg-box">
                <form action="/account/register" method="post" th:object="${newAccount}">
                    <div>
                        <tr>
                            <td>用&nbsp;户&nbsp;名：&nbsp;</td>
                            <td><input type="text" name="account.name" id="InputUsername" th:field="*{username}" placeholder="必填"
                                       onblur="searchUsername(this)"></td>
                            <div id="hint"></div>
                        </tr>
                    </div>
                    <div>
                        <tr>
                            <td>密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码：&nbsp;</td>
                            <td><input type="password" name="account.password" id="InputPassword" th:field="*{password}" placeholder="必填">
                            </td>
                        </tr>
                    </div>
                    <div class="reg-font">
                        <tr>
                            <td>确认密码：</td>
                            <td><input type="password" name="Repassword" id="InputRepassword" placeholder="必填"></td>
                            <br>
                            <br>
                        </tr>
                    </div>
                    <div>
                        <tr>
                            <td th:field="*{sex}">
                                性别：男
                                <input type="radio" checked="checked" name="account.sex" value="male"/>
                                女
                                <input type="radio" name="account.sex" value="female"/>
                            </td>
                        </tr>
                    </div>
                    <div>
                        <tr>
                            <td>年龄：</td>
                            <td><input type="number" name="account.age" id="InputAge">
                                <br>
                                <br>
                        </tr>
                    </div>
                    <div>
                        <tr>
                            <td>电子邮箱：</td>
                            <td><input type="email" name="account.email" id="InputEmail" placeholder="必填"></td>
                        </tr>
                    </div>
                    <div>
                        <tr>
                            <td>电话号码：</td>
                            <td><input type="tel" name="account.phone" id="InputPhone" placeholder="必填"></td>
                            <br>
                            <br>
                        </tr>
                    </div>
                    <div>
                        <tr>
                            <td>地址1：</td>
                            <td><input type="text" name="account.address1" id="InputAddress1" placeholder="必填"></td>
                        </tr>
                    </div>
                    <div>
                        <tr>
                            <td>地址2：</td>
                            <td><input type="text" name="account.address2" id="InputAddress2"></td>
                        </tr>
                    </div>
                    <div>
                        <tr>
                            <td>城市：</td>
                            <td><input type="tel" name="account.city" id="InputCity"></td>
                        </tr>
                    </div>
                    <div>
                        <tr>
                            <td>国家：</td>
                            <td><input type="tel" name="account.country" id="InputCountry"></td>
                            <br>
                            <br>
                        </tr>
                    </div>
                    <div>
                        <tr>
                            <td>
                                语言偏好：简体中文
                                <input type="radio" checked="checked" name="account.languagePreference"
                                       value="Chinese"/>
                                &nbsp;
                                English
                                <input type="radio" name="account.languagePreference" value="English"/>
                            </td>
                        </tr>
                    </div>
                    <div>
                        <tr>
                            <td> 种类偏好：</td>
                            <td>
                                <select name="account.favoriteCategoryId">
                                    <option value="fBirds" selected="selected">Birds</option>
                                    <option value="fCats">Cats</option>
                                    <option value="fDogs">Dogs</option>
                                    <option value="fFish">Fish</option>
                                    <option value="fReptiles">Reptiles</option>
                                </select>
                            </td>
                        </tr>
                    </div>
                    <div>
                        验证码：<input type="text" name="validation" id="validation"/>
                        <img alt="验证码图片" src="validation" id="imgservlet" onclick="reloadImage()"/>
                        <input type="button" value="换一张" onclick="reloadImage()" id="btn">
                    </div>
                    <div class="Tip-register" th:if="${tip!=null}" th:text="${tip}">
                        Tip!
                    </div>
                    <div class="reg-sub">
                        <input id="submitButton" type="submit" value="提交注册">
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<footer th:replace="common/IncludeBottom"></footer>
</body>
</html>